<template>
  <Modal
    :open="open"
    title="设置业务入口"
    @cancel="open = false"
    @ok="onSubmit()"
  >
    <Form
      :model="formState"
      name="basic"
      :label-col="{ span: 10 }"
      :wrapper-col="{ span: 12 }"
      autocomplete="off"
    >
      <FormItem
        label="查询余票业务入口"
        name="remainingUrl"
        :rules="[{ required: true, message: '请输入查询余票业务入口' }]"
      >
        <Input v-model:value="formState.remainingUrl" placeholder="请输入业务入口网址"/>
      </FormItem>
      <FormItem
        label="查询最便宜的票业务入口"
        name="cheapestUrl"
        :rules="[{ required: true, message: '请输入查询最便宜的票业务入口' }]"
      >
        <Input v-model:value="formState.cheapestUrl" placeholder="请输入业务入口网址" />
      </FormItem>
    </Form>
  </Modal>
</template>

<script lang="ts">
import { Form, Modal, Input, notification } from "ant-design-vue";
import { defineComponent, ref, reactive } from "vue";
export default defineComponent({
  components: {
    Form,
    FormItem: Form.Item,
    Modal,
    Input,
  },
  setup() {
    const open = ref<boolean>(false);
    const formState = reactive<any>({
      remainingUrl: "",
      cheapestUrl: "",
    });
    return {
      open,
      formState,
    };
  },
  methods: {
    openModal() {
      this.open = true;
      let remainingUrl = localStorage.getItem("remainingUrl");
      let cheapestUrl = localStorage.getItem("cheapestUrl");
      if (remainingUrl === null) {
        this.formState.remainingUrl = "";
      } else {
        this.formState.remainingUrl = remainingUrl;
      }
      if (cheapestUrl === null) {
        this.formState.cheapestUrl = "";
      } else {
        this.formState.cheapestUrl = cheapestUrl;
      }
    },
    onSubmit() {
      localStorage.setItem("remainingUrl", this.formState.remainingUrl);
      localStorage.setItem("cheapestUrl", this.formState.cheapestUrl);
      this.open = false;
      notification["success"]({
          message: "业务入口设置成功",
        });
    },
  },
});
</script>

<style>
</style>